/**
 * 需求: 轮播插件
 */

let swiper = new Swiper('.swiper', {
    navigation: { //左右按钮
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    loop: true, //循环
    autoplay: { //自动播放
        delay: 1000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
    },
    pagination: { //分页器
        el: '.swiper-pagination',
        clickable: true, //点击分液器
    },
    // autoplay: { //鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换。
    //     pauseOnMouseEnter: true,
    // },
});

//鼠标覆盖停止自动切换
swiper.el.onmouseover = function() {
    swiper.autoplay.stop();
};
//鼠标离开开始自动切换
swiper.el.onmouseout = function() {
    swiper.autoplay.start();
};




/**
 * 需求: 鼠标移入li,
 *          改变当前li的背景色为rgb(47, 126, 233) 
 *          改变当前li下面图片的src路径 原有名字-c.svg
 *          改变当前li字体颜色为白色
 */
let apiLi = document.querySelectorAll('.api-list li')
let filename = ''; //保存文件名
let extname = ''; //保存后缀名


apiLi.forEach(function(dom, index) {
    dom.addEventListener('mouseover', function() {
        this.style.backgroundColor = 'rgb(47, 126, 233)';
        this.style.color = '#fff';
        //this.children[0].src = `../../assets/imgs/api0${index+1}-c.svg`
        //获取当前图片的路径
        let path = this.children[0].src;
        //获取路径path最后一个/ 和 最后一个.的位置
        let index1 = path.lastIndexOf('/');
        let index2 = path.lastIndexOf('.');

        //截取路径path中的文件名
        filename = path.substring(index1 + 1, index2);

        //截取路径path中的后缀名
        extname = path.substring(index2 + 1)

        //设置图片的激活路径
        this.children[0].src = `../../assets/imgs/${filename}-c.${extname}`
    })

    dom.addEventListener('mouseout', function() {
        this.style.backgroundColor = '#fff'
        this.style.color = '#666'
        this.children[0].src = `../../assets/imgs/${filename}.${extname}`
    })
})


// 主力部分滚动页面和滚动数据
let Swiper1 = new Swiper('.swiper1', {
    loop: true, //循环
    autoplay: { //自动播放
        delay: 2000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
    },
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    effect: 'fade', //动画效果：渐变
    noSwiping: true,

});
//鼠标覆盖停止自动切换
Swiper1.el.onmouseover = function() {
    Swiper1.autoplay.stop();
};
//鼠标离开开始自动切换
Swiper1.el.onmouseout = function() {
    Swiper1.autoplay.start();
};



// 回到置顶按钮
let rTop = document.querySelector('#rTop'); //获取置顶事件
window.addEventListener('scroll', function() {
    //获取滚动距离
    let sTop = document.documentElement.scrollTop;
    // console.log(sTop);
    if (sTop >= 800) {
        rTop.style.display = 'block';
    } else {
        rTop.style.display = 'none';
    }
})

// 需求:点击rTop按钮，让滚动条缓慢的回到顶部
rTop.addEventListener('click', function() {
    //设置滚动条距离
    window.scrollTo({
        top: 0,
        behavior: 'smooth',
    })
})